<template>
<el-tabs class="tabs" active-name="first">
        <el-tab-pane label="讨论" name="first" class="first">
          <ul ref="ul" class="talks">
            <li class="talk" v-for="(talk, index) in talks" :key="index">
              <div class="name" :style="{ color:talk.user._id === currentUser._id?'#65d77e':'#409eff' }">
                <span class="name-wrapper">
                  {{ talk.user.name }}
                </span>
                <div style="clear: both;"></div>
              </div>
              <div class="mess">
                {{ talk.talk }}
              </div>
            </li>
          </ul>
          <div class="send" :class="{ 'ver':!mod3D }">
            <el-input @keydown.enter="newTalk" @blur="mitt.emit('stopwalk',false)" @focus="mitt.emit('stopwalk',true)" v-model="talk" placeholder="Please input" class="input" />
            <div class="between"></div>
            <ElButton @click="newTalk" plain type="primary">发送</ElButton>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="`成员(${students.length})`" name="second" class="second">
          <el-table :data="numbers" class-name="list" :show-header="false">
            <el-table-column label="" :min-width="60" class-name="portrait-list">
              <template #default="scope">
                <el-image
                  class="stu-portrait"
                  :src="conf.server + scope.row.portrait"
                  fit="cover"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="" />
            <el-table-column prop="status" label="" :width="50">
              <template #default="scope">
               <span style="font-size: 12px;" :style="{color:scope.row.status === 'online'?'#95d475':'#c8c9cc'}"> {{ scope.row.status === 'online'?'在线':'离线' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="" :width="50">
              <template #default="scope">
                <span v-show="scope.row._id === talking" style="color:#95d475;font-size: 20px;position: relative;top: 4px;">
                  <!-- 发言中... -->
                  <ElIcon>
                    <Microphone />
                  </ElIcon>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
</template>

<script lang="ts" setup>
import { computed, ref,toRefs,watch } from "vue";
import { conf } from "@/utils/conf";
import { wsCommunicate } from "@/hooks/wsCommunicate";
import { useClientStore } from "@/pinia/stores/client";
import { users } from "@/shared/types/user";
import { WsClient } from 'tsrpc-browser';
import { ServiceType } from "@/shared/protocols/serviceProto";
import mitt from "@/mitt";

const currentUser = useClientStore().currentUser;
const props = defineProps<{
    students:Array<{
        student: users;
        status: "online" | "offline";
    }>
    wsClient:WsClient<ServiceType>
    courseId:string,
    mod3D?:boolean
}>()
const {students,wsClient,courseId,mod3D} = toRefs(props)

const ul = ref<HTMLUListElement>()
const { talks, sendTalk,talk,newTalk,talking } = wsCommunicate(wsClient.value, courseId.value,ul);

const numbers = computed(() => {
    console.log(students);
  const nums = students.value.map((s) => {
    return {
      portrait: s.student.portrait,
      name: s.student.name,
      status: s.status,
      _id:s.student._id
    };
  });
  // for (let i = 0;i < 20; i++) {
  //   nums.unshift({
  //     portrait: currentUser.portrait,
  //     name: currentUser.name,
  //     status: "online",
  //   });
  // }
  return nums;
});


</script>

<style lang="less" scoped>
.tabs {
      height: 100%;
      display: flex;
      flex-direction: column;

      .first {
        height: 100%;
        .talks {
          margin: 0;
          height: calc(100% - 40px);
          list-style: none;
          padding: 0;
          overflow: auto;
          .talk {
            padding: 5px 10px;
            font-size: 16px;
            .name{
              margin-bottom: 5px;
              .name-wrapper{
                position: relative;
                float: left;
              }
            }
            .mess{
              margin-top: 5px;
              word-break: break-all;
            }
          }
        }
        .between {
          width: 10px;
        }
        .send {
          display: flex;
          padding: 4px 5px;
          height: 40px;
        }
      }
      .second {
        height: 100%;
        overflow: auto;
        .list {
          background-color: #ffffff00 !important;
          color: #000;
          .portrait-list {
            .stu-portrait {
              height: 50px;
              width: 50px;
              border-radius: 50%;
            }
          }
        }
      }
    }
</style>

<style lang="less">
.tabs {
  position: relative;
  width: 100%;
  .el-tabs__header {
    margin-bottom: 0;
  }
  & > .el-tabs__content {
    height: calc(100% - 40px);
    min-height: 390px;
    padding: 0px;
    // color: #6b778c;
    // font-size: 32px;
    // font-weight: 600;
    .first {
      .send > .input > div {
        border-radius: 20px;
      }
    }
  }
  .el-tabs__nav {
    width: 100%;
    .el-tabs__item {
      width: 50%;
      text-align: center;
      padding: 0 30px !important;
      font-size: 18px;
      // color: white;
    }
  }
  .portrait-list > .cell {
    display: flex;
  }
}


tr{
  background-color: #ffffff00!important;
}

</style>